function Pagination(selector, options) {
    // 把这个元素获取到变成Pagination对象的属性
    this.box = document.querySelector(selector)

    this.options = options || {}

    // 所有生成内容都需要根据数据计算
    this.default = {
        // 生div的class
        strClass: this.options.strClass || 'first, prev, list, next, last, go, total, limit',
        // 总条数
        total: this.options.total || 1000,
        // 每页多少条
        limitArr: this.options.limitArr || [12, 24, 36, 48],
        // 总页数
        // pages: function () {
        //     return this.total / this.limitArr[0]
        // },
        // 当前页
        num: 1,
        callback: this.options.callback || function () { }
    }

    this.default.pages = Math.ceil(this.default.total / this.default.limitArr[0])

    // 在这个box里面生成一对div标签
    this.createDiv()
    // 生成页码
    this.createPage()
    // 事件
    this.addEvent()
}

Pagination.prototype.createDiv = function () {
    // 把这堆字符串转成数组 [first, prev, list, next, last, go, total, limit]
    // console.log(this.default.strClass.length)
    const arr = this.default.strClass.split(', ')
    // console.log(arr)
    // 循环数组创建div
    arr.forEach(ele => {
        // 创建div
        let div = document.createElement('div')
        // 把ele数组里面的每个值当做div的class
        div.classList.add(ele)

        // 首页
        if (ele === 'first') {
            div.innerHTML = '<<'
            this.first = div
        }

        // 上一页
        if (ele === 'prev') {
            div.innerHTML = '<'
            this.prev = div
        }

        // 页码
        if (ele === 'list') {
            this.list = div
        }

        // 下一页
        if (ele === 'next') {
            div.innerHTML = '>'
            this.next = div
        }

        // 尾页
        if (ele === 'last') {
            div.innerHTML = '>>'
            this.last = div
        }

        // 跳转
        if (ele === 'go') {
            div.innerHTML = `第<input type="text" value="1">页<input type="button" value="确定">`
            this.inp = div.children[0]
        }

        // 共多少条
        if (ele === 'total') {
            div.innerHTML = `共${this.default.total}条`
        }

        // 每页多少条
        if (ele === 'limit') {
            div.innerHTML = `<select>${this.createOption()}</select>`
            this.select = div.children[0]
        }

        // 把创建好的div添加到box里面
        this.box.appendChild(div)
    })
}

Pagination.prototype.createOption = function () {
    // 循环limit数组拼接成一对字符串 再返回
    let str = ''
    this.default.limitArr.forEach(ele => {
        str += `<option value="${ele}">${ele} 条/页</option>`
    })
    return str
}

Pagination.prototype.createPage = function () {
    let pages = this.default.pages      // 总页数
    let num = this.default.num          // 当前页
    // 清空html
    this.list.innerHTML = ''
    // 改变input 值
    if (this.inp) {
        this.inp.value = num
    }
    // 执行回调函数
    this.default.callback(num, this.select.value)

    // 判断总页数
    if (pages <= 7) {
        for (let i = 1; i <= pages; i++) {
            // 添加到list这个标签里面
            // console.log(this.list)
            this.list.appendChild(this.createTag('p', i))
        }
    } else {
        // 小于5
        if (num < 5) {
            for (let i = 1; i <= 6; i++) {
                // 添加到list这个标签里面
                // console.log(this.list)
                this.list.appendChild(this.createTag('p', i))
            }
            this.list.appendChild(this.createTag('span', '...'))
            this.list.appendChild(this.createTag('p', pages))
        } else if (num > pages - 4) {
            // 大于总页数-4
            this.list.appendChild(this.createTag('p', 1))
            this.list.appendChild(this.createTag('span', '...'))
            for (let i = pages - 5; i <= pages; i++) {
                // 添加到list这个标签里面
                // console.log(this.list)
                this.list.appendChild(this.createTag('p', i))
            }
        } else {
            // 剩余的情况
            this.list.appendChild(this.createTag('p', 1))
            this.list.appendChild(this.createTag('span', '...'))
            for (let i = num - 2; i <= num + 2; i++) {
                // 添加到list这个标签里面
                // console.log(this.list)
                this.list.appendChild(this.createTag('p', i))
            }
            this.list.appendChild(this.createTag('span', '...'))
            this.list.appendChild(this.createTag('p', pages))
        }
    }

    // 判断是不是首页尾页
    this.isDisabled()
}

Pagination.prototype.createTag = function (tagName, i) {
    let num = this.default.num          // 当前页
    // 创建标签
    let p = document.createElement(tagName)
    // 内容
    p.innerHTML = i
    // 当前页
    if (i === num) {
        p.classList.add('on')
    }

    return p
}

Pagination.prototype.addEvent = function () {
    // 选中文字必须加按下事件里面
    // this.box.onmousedown = () => {
    //     return false
    // }
    this.box.onclick = (e) => {
        // 首页
        if (e.target.className === 'first') {
            // 当前页等于1
            this.default.num = 1
            this.createPage()
        }
        // 上一页
        if (e.target.className === 'prev') {
            // 当前页++
            this.default.num--
            // 判断是否超出范围
            if (this.default.num < 1) {
                this.default.num = 1
            }
            this.createPage()
        }
        // 下一页
        if (e.target.className === 'next') {
            // 当前页++
            this.default.num++
            // 判断是否超出范围
            if (this.default.num > this.default.pages) {
                this.default.num = this.default.pages
            }
            this.createPage()
        }
        // 尾页
        if (e.target.className === 'last') {
            // 当前页等于总页数
            this.default.num = this.default.pages
            this.createPage()
        }
        // 页码
        if (e.target.tagName === 'P') {
            // 当前页等于发生事件那个元素的内容
            this.default.num = e.target.innerHTML - 0
            this.createPage()
        }
        // 跳转
        if (e.target.type === 'button') {
            // 当前页等于输入框的内容
            this.default.num = e.target.previousElementSibling.value - 0
            this.createPage()
        }
    }
    // 改变条数
    if (this.select) {
        this.select.onchange = () => {
            // console.log(this.select.value)
            // 改变总页数
            this.default.pages = Math.ceil(this.default.total / this.select.value)
            this.createPage()
        }
    }
}

Pagination.prototype.isDisabled = function () {
    if (this.default.num === 1) {
        this.first.classList.add('_disabled')
        this.prev.classList.add('_disabled')
    } else {
        this.first.classList.remove('_disabled')
        this.prev.classList.remove('_disabled')
    }

    if (this.default.num === this.default.pages) {
        this.next.classList.add('_disabled')
        this.last.classList.add('_disabled')
    } else {
        this.next.classList.remove('_disabled')
        this.last.classList.remove('_disabled')
    }
}

